<template>
	<view class="aboutGroup">
		<view class="groupList flex justConBetween">
			<view class="leftBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2==0">
						<uni-mygroup :groupItem="item" :canAdd="false" :canStar="false" :canDetail="false" :canOffline="oper=='seeAll'?true:false" @groupComOper="groupComOper"></uni-mygroup>
					</view>
				</template>
			</view>
			<view class="rightBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2!=0">
						<uni-mygroup :groupItem="item" :canAdd="false" :canStar="false" :canDetail="false" :canOffline="oper=='seeAll'?true:false" @groupComOper="groupComOper"></uni-mygroup>
					</view>
				</template>
			</view>
		</view>
		<uni-nodata v-if="groupData.length==0"></uni-nodata>
		<view class="fixedBtn flex alignCenter justConAround">
			<view class="noWidthBtn" @click="toAdd" v-if="!oper">确定</view>
			<view class="noWidthBtn" @click="toCreate" v-if="!oper">+新建小组</view>
		</view>
	</view>
</template>

<script>
	import { myGroup } from "@/api/mine.js"
	import { connectGroup,activityGroup,offlineActivity } from "@/api/send.js"
	export default {
		data() {
			return {
				groupData:[],
				page:1,
				pageSize:20,
				pageTotal:0,
				actId:'',
				oper:'',
				isMine:false,
				chooseGroup:[]
			}
		},
		onLoad(option) {
			this.actId=option.id?option.id:''
			this.oper=option.oper?option.oper:''
			if(this.oper){
				this.getActAllGroup()
			}else{
				this.getList()
			}
			
		},
		methods: {
			initPage(){
				this.page=1;
				this.groupData=[]
			},
			// 小组关联的列表
			getActAllGroup(){
				let param={
					page:this.page,
					size:this.pageSize,
					teamActivityId:this.actId
				}
				activityGroup(param).then((res)=>{
					if(res.code==100000){
						this.groupData=this.groupData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			// 我的小组列表
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					myTeamsType:1,// 0:全部; 1:我管理的; 2:我参与的; 3我收藏的
					teamActivityId:this.actId
				}
				myGroup(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						// 有缓存，回显选中的
						let alreadyChoose=uni.getStorageSync('actConnectGroup') || []
						res.data.rows.forEach((item)=>{
							item.chooseStatus=item.isRelationTeamActivity?item.isRelationTeamActivity:false
							if(alreadyChoose.length>0){
								alreadyChoose.forEach((val)=>{
									if(val.id==item.id){
										item.chooseStatus=true
										return
									}
								})
							}
						})
						this.groupData=this.groupData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			groupComOper(obj){
				// 解绑
				if(obj.type=='offline'){
					let param={
						teamId:obj.item.id,
						teamActivityId:this.actId
					}
					offlineActivity(param).then((res)=>{
						if(res.code==100000){
							this.initPage()
							this.getActAllGroup()
						}
					})
				}
				// 活动关联小组
				if(obj.type=='add'){
					this.chooseGroup.push(obj.item)
				}else if(obj.type=='reduce'){
					this.chooseGroup.forEach((val,index)=>{
						if(val.id==obj.item.id){
							this.chooseGroup.splice(index,1)
							return
						}
					})
				}
			},
			// 确定
			toAdd(){
				if(this.chooseGroup.length==0){
					uni.showToast({
						title:'请先选择要关联的小组',
						icon:'none'
					})
					return
				}
				if(this.actId){
					// 在活动详情关联小组的逻辑 TO DO
					let ids=[]
					this.chooseGroup.forEach((item)=>{
						ids.push(item.id)
					})
					let param={
						teamIds:ids,
						teamActivityId:this.actId,
						isCharge:false
					}
					connectGroup(param).then((res)=>{
						if(res.code==100000){
							uni.showToast({
								title:'关联成功',
								icon:'none'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						}
					})
				}else{
					// 新增活动时选择关联小组的逻辑
					uni.setStorageSync('actConnectGroup',this.chooseGroup)
					uni.navigateBack({
						delta:1
					})
				}
			},
			// 新建
			toCreate(){
				uni.navigateTo({
					url:'/pages/send/group/group'
				})
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.groupList{
	flex-wrap: wrap;
	padding: 30rpx;
	box-sizing: border-box;
	&>view{
		flex: 0 0 48%;
	}
	.groupOne{
		margin-bottom: 30rpx;
		border-radius:8rpx;
	}
}
.aboutGroup{
	padding: 0 0 120rpx;
	box-sizing: border-box;
	.fixedBtn{
		position: fixed;
		bottom: 30rpx;
		padding: 0 100rpx;
		width:100%;
		box-sizing: border-box;
		.noWidthBtn{
			padding: 20rpx 50rpx;
		}
	}
}
</style>
